<template>
  <div class="card">
    <div :id="id" style="width: 100%; height: 250px"></div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import * as echarts from "echarts";

export default {
  name: "Setting",
  components: {},
  props: {
    id: {
      default: "main",
      type: String,
    },
    data: {
      default: {
        xData: [
          "00:00",
          "01:00",
          "02:00",
          "03:00",
          "04:00",
          "05:00",
          "06:00",
          "07:00",
          "08:00",
          "09:00",
          "10:00",
          "11:00",
          "12:00",
        ],
        yData: [
          {
            value: 0,
            itemStyle: {
              color: "rgb(100,187,92)",
              borderRadius: [100, 100, 0, 0],
            },
            barWidth: "20%",
          },
          {
            value: 0,
            barWidth: "40%",
            itemStyle: {
              color: "rgb(237,111,33)",
            },
          },
          {
            value: 0,
            itemStyle: {
              color: "rgb(100,187,92)",
            },
          },
          {
            value: 0,
            itemStyle: {
              color: "rgb(100,187,92)",
            },
          },
          {
            value: 0,
            itemStyle: {
              color: "rgb(100,187,92)",
            },
          },
          {
            value: 0,
            itemStyle: {
              color: "rgb(100,187,92)",
            },
          },
          {
            value: 0,
            barWidth: "30%",
            itemStyle: {
              color: "rgb(237,111,33)",
            },
          },
          {
            value: 0,
            itemStyle: {
              color: "rgb(100,187,92)",
            },
          },
          {
            value: 0,
            barWidth: "30%",
            itemStyle: {
              color: "rgb(237,111,33)",
            },
          },
          {
            value: 60,
            itemStyle: {
              color: "rgb(100,187,92)",
            },
          },
          {
            value: 80,
            barWidth: "30%",
            itemStyle: {
              color: "rgb(237,111,33)",
            },
          },
          {
            value: 60,
            itemStyle: {
              color: "rgb(100,187,92)",
            },
          },
        ],
      },
    },
    translate: {
      type: String,
      default: "",
    },
    // disabled: {
    //   default: false,
    //   type: Boolean,
    // },
  },
  data() {
    return {
      popupShow: 0,
      isShowDeleteComfirm: false,
    };
  },

  computed: {
    ...mapState([
      "motorLock",
      "battery",
      "role",
      "isShare",
      "devName",
      "darkMode",
    ]),
    ...mapState({
      defenceSwitch: (state) => state.defenceSwitch.on,
      startMode: (state) => state.startMode.mode - 1,
      autocruiseSwitch: (state) => state.autocruiseSwitch.on,
      speedUnit: (state) => state.mileageMode.mode,
      status: (state) => state.status.status,
    }),
    ...mapGetters(["canControl"]),
  },
  methods: {
    draw() {
      var myChart = echarts.init(document.getElementById(this.id));
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            console.log("params.value", params);
            return `${params[0].name+":"+params[0].value+"%"}`;
          },
        },
        xAxis: {
          data: this.data.xData,
          gridIndex: 0,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: this.darkMode ? "rgba(255,255,255,0.2)" : "#eee",
            },
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: this.darkMode
                ? "rgba(255,255,255,0.6)"
                : "rgba(0,0,0,0.4)",
              fontSize: "10px",
            },
          },
        },
        yAxis: {
          position: "right",
          splitLine: {
            lineStyle: {
              color: this.darkMode ? "rgba(255,255,255,0.6)" : "#eee",
            },
          },
          axisLine: {
            lineStyle: {
              color: this.darkMode
                ? "rgba(255,255,255,0.2)"
                : "rgba(0,0,0,0.4)",
            },
          },
          offset: 20,
          axisLabel: {
            align: "right", // 右对齐
            fontSize: "10px",
            show: true,
            interval: "auto",
            formatter: "{value} %",
          },
          name: this.translate,
          nameTextStyle: {
            color: this.darkMode ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.4)",
            nameLocation: "start",
            fontSize: "10px",
          },
        },
        grid: [{ bottom: "38", top: "30", left: "24", right: "50" }],
        series: [
          {
            data: this.data.yData,
            type: "bar",
            barWidth: "20px",
            itemStyle: {
              borderRadius: [100, 100, 0, 0],
              borderColor: !this.darkMode ? "#fff" : "#303030",
            },
            // itemStyle: {
            //     normal: {
            //         label: {
            //             show: true,
            //             position: 'top',
            //             formatter: '{b}\n{c}%'
            //         }
            //     }
            // },
          },
        ],
      };
      myChart.clear();
      myChart.setOption(option);
    },
  },
  mounted() {
    // 绘制图表
    this.draw();
    // 重置物理返回键
    window.goBack = () => {
      if (this.popupShow) {
        this.popupShow = 0;
        return;
      }
      this.$router.goBack();
    };
  },
};
</script>
<style lang="less" scoped>
@import url("../style/public.less");
#setting {
  .card {
    align-self: stretch;
    .cardStyle();
    margin-top: 0.8rem;
    padding: 0.4rem 0;
    .switch {
      width: 4rem;
      height: 2rem;
      background-image: var(--ic_switch_off);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right center;
      &.on {
        background-image: var(--ic_switch_on);
      }
    }
  }
}
// 适配
.pad {
  #setting {
    .content {
      margin: 0 var(--pad_column_1);
    }
  }
}
</style>